<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>放烟花效果（面向对象版）</title>
		<style type="text/css">
		html,body{overflow:hidden;}
		body,div,p{margin:0;padding:0;}
		body{background:#000;font:12px/1.5 arial;color:#7A7A7A;}
		a{text-decoration:none;outline:none;}
		#tips,#copyright{position:absolute;width:100%;height:50px;text-align:center;background:#171717;border:2px solid #484848;}
		#tips{top:0;border-width:0 0 2px;}
		#tips a{font:14px/30px arial;color:#FFF;background:#F06;display:inline-block;margin:10px 5px 0;padding:0 15px;border-radius:15px;}
		#tips a.active{background:#FE0000;}
		#copyright{bottom:0;line-height:50px;border-width:2px 0 0;}
		#copyright a{color:#FFF;background:#7A7A7A;padding:2px 5px;border-radius:10px;}
		#copyright a:hover{background:#F90;}
		p{position:absolute;top:55px;width:100%;text-align:center;}
		.fire {
			width: 3px;
			height: 50px;
			background: white;
			position: absolute;
		} 
		.spark {
			position:absolute;
			width: 6px;
			height: 6px;
		}
		</style>
	<script src="move.yintao1.05.js" type="text/javascript" charset="utf-8"></script>	
	<script type="text/javascript">
		window.onload = function(){
			//首先获取鼠标点击的位置
			document.addEventListener("click",function(e){
				var e = e || event;
				var mousePoint = {x:e.clientX, y:e.clientY};
				//生成一个烟花炸点
				var pointBoom = document.createElement("div");
				pointBoom.className = "fire";
				document.body.appendChild(pointBoom);
				pointBoom.style.left = mousePoint.x + "px";
				pointBoom.style.top = window.innerHeight - pointBoom.offsetHeight + "px";
				//烟花炸点逐步升空
				animate(pointBoom,{top:mousePoint.y, height:3},{callback:function(){
					pointBoom.remove();
					//随机生成烟花  数量在40 - 70个之间
					var count =Math.round( Math.random() )*30 + 40;
					for(var i = 0; i < count; i++){
						//使用let使spark变成局部变量
						let spark = document.createElement("div");
						spark.className = "spark";
						//随机生成的烟花的初始位置为鼠标点击位置
						spark.style.left = mousePoint.x + "px";
						spark.style.top = mousePoint.y + "px";
						//随机速度
						let speedx = Math.random()*40 - 20;
						let speedy = Math.random()*40 - 20;
						//随机颜色
						spark.style.background = "rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")";						
						//每个烟花做抛物线运动
						let timer = setInterval(function(){
							console.log(spark);
							spark.style.left = spark.offsetLeft + speedx + "px";
							spark.style.top = spark.offsetTop + speedy++ + "px";
							if(spark.offsetTop > window.innerHeight){
								spark.remove();
								clearInterval(timer);
							}
						},30);
						document.body.appendChild(spark);
					}
				}});
				
			});
			
		}
	</script>
</head>
<body>
<div id="tips"><a id="manual" href="javascript:;" class="active">手动放烟花</a><a id="auto" href="javascript:;" class="">自动放烟花</a><a id="stop" href="javascript:;" class="">停止放烟花</a></div>
<p>由于浏览器渲染能力有限, 当浏览器为IE或选择自动放烟花时, 随机生成的烟花碎片范围自动调整至20-30</p>
<div id="copyright">建议使用Firefox, Chrome浏览器预览效果. </div>

</body></html>